.device-background {
  $base-border-radius: 3px !default;
  $action-color: #477DCA !default;
  $large-screen: 53.75em !default;
  $device-padding-vertical: 5em;
  $device-padding-horizontal: 0.4em;
  $device-screen-width: 14em;
  $device-screen-height: 25em;
  $device-background: darken(gray, 40%);
  $device-backside-background: darken($device-background, 10%);
  $device-text-color: white;
  $device-background-top: #162C4C;
  $device-background-bottom: #0A120D;
  $gradient-angle: 10deg;
  $device-image: "https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png";
  $device-screen-image: "https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg";

  background: url($device-image),
              linear-gradient($gradient-angle, $device-background-bottom, $device-background-top),
              no-repeat $device-background-top scroll;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 20em;
  width: 100%;

  .device-text {
    padding: 2em;

    @include media($large-screen) {
      float: left;
      max-width: 50%;
      padding: 4em;
    }

    h4 {
      border-bottom: 1px solid transparentize($device-text-color, 0.7);
      color: $device-text-color;
      font-size: 1.5em;
      margin: 0 0 0.5em 0;
      padding-bottom: 0.5em;
    }

    p {
      color: $device-text-color;
      line-height: 1.5em;
      margin-bottom: 1.5em;
    }
  }

  .device {
    display: none;
    position: relative;

    @include media($large-screen) {
      background: $device-background;
      border-radius: 2em;
      box-shadow:
        1px 0 lighten($device-backside-background, 20%),
        4px 0 lighten($device-backside-background, 2%),
        7px 0 $device-backside-background,
        10px 0 $device-backside-background,
        13px 0 $device-backside-background;
      display: block;
      float: right;
      margin-bottom: -12em;
      margin-right: 5em;
      padding: $device-padding-vertical 0;
      transform:
        perspective(800px)
        translateX(0)
        translateY(-100px)
        translateZ(50px)
        rotateX(0)
        rotateY(-20deg)
        rotateZ(0)
      ;
      width: $device-screen-width + (2 * $device-padding-horizontal);
      z-index: 99999;

      .screen {
        @include size($device-screen-width, $device-screen-height);
        background-image: url($device-screen-image);
        background-size: cover;
        border-radius: 0.2em;
        box-shadow: inset 0 1px 8px transparentize(black, 0.5);
        margin: auto;
      }
    }
  }
}
